<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .video {
      width: 620px;
      height: 440px;
      display: block;

    }
  </style>
</head>

<body>
  <div>
    <video src="" id="video" class="video" controls></video>

    <div>

      <select name="" id="screen-share-select"></select>
      <button id="getVideo">获取视频</button>
      <button id="getAudio">获取麦克风</button>
    </div>
    <div id="mystatus"></div>
  </div>
  <script>
    let video = document.getElementById('video')
    let mystatus = document.getElementById('mystatus')
    document.getElementById('getVideo').onclick = function () {
      getUserMedia({
        video: true,
      }, function (stream) {
        video.srcObject = stream
      });
    }
    document.getElementById('getAudio').onclick = function () {
      getUserMedia({
        audio: true
      }, function (stream) {
        let audioContext = window.AudioContext || window.webkitAudioContext;
        let context = new audioContext(); //创建一个管理、播放声音的对象
        let liveSource = context.createMediaStreamSource(stream); //将麦克风的声音输入这个对象
        var levelChecker = context.createScriptProcessor(4096, 1, 1); //创建一个音频分析对象，采样的缓冲区大小为4096，输入和输出都是单声道
        liveSource.connect(levelChecker); //将该分析对象与麦克风音频进行连接
        levelChecker.connect(audioContext.destination); //将该分析对象与麦克风音频进行连接
        levelChecker.onaudioprocess = function (e) { //开始处理音频
          var buffer = e.inputBuffer.getChannelData(0); //获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
          //创建变量并迭代来获取最大的音量值
          var maxVal = 0;
          for (var i = 0; i < buffer.length; i++) {
            if (maxVal < buffer[i]) {
              maxVal = buffer[i];
            }
          }
          console.log(maxVal);
          //显示音量值
          mystatus.innerHTML = "您的音量值：" + Math.round(maxVal * 100);
          if (maxVal > .5) {
            //当音量值大于0.5时，显示“声音太响”字样，并断开音频连接
            mystatus.innerHTML = "您的声音太响了!!";
            liveSource.disconnect(levelChecker);
          }
        };
      });
    }


    function getUserMedia(constrains, success, error) {

      try {
        if (navigator.mediaDevices.getUserMedia) {
          //最新标准API
          navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
          //webkit内核浏览器
          navigator.webkitGetUserMedia(constrains).then(success).catch(error);
        } else if (navigator.mozGetUserMedia) {
          //Firefox浏览器
          navagator.mozGetUserMedia(constrains).then(success).catch(error);
        } else if (navigator.getUserMedia) {
          //旧版API
          navigator.getUserMedia(constrains).then(success).catch(error);
        }
      } catch (e) {
      }
    }

    // async function main() {

    //   getUserMedia({
    //     video: true,
    //     audio: true
    //   }, function (stream) {
    //     video.srcObject = stream
    //   });
    // }

    // document.getElementById('start').onclick = function () {
    //   console.log('start');
    //   startScreenShare();
    // }


    async function startScreenShare() {
      const selectContainer = document.getElementById('screen-share-select');
      // const selectValue = selectContainer.options[selectContainer.selectedIndex].value;
      // console.log(selectValue);
      // console.log(selectContainer.selectedIndex);
      // const [source] = window.shareSourceList.filter(obj => obj.name === `${selectValue}`);
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: {
            mandatory: {
              chromeMediaSource: 'desktop',
              chromeMediaSourceId: 'screen:1:0', // 屏幕分享源 id
              minWidth: 1280,
              maxWidth: 1280,
              minHeight: 720,
              maxHeight: 720
            }
          }
        });
        console.log(stream);
      } catch (error) {
        console.error('start screen share error = ', error)
      }
    }

    // main()

  </script>
</body>

</html>